<!--
 * @Description:
 * @Version: 1.0
 * @Autor: haozhuang
 * @Date: 2020-05-07 10:35:58
 * @LastEditors: haozhuang
 * @LastEditTime: 2020-05-11 17:32:20
 -->
<template>
  <div class="share">
    <h3 class="title">
      分享给我
      <el-pagination
        class="pagination"
        :page-size="pageSize"
        :pager-count="11"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="shareList.total"
        @current-change="handleCurrentChange"
      />
    </h3>
    <div class="list">
      <div
        v-for="(item, index) in shareList.dataList"
        :key="index"
        class="case el-row--flex"
      >
        <div class="type">
          {{ item.type }}
        </div>
        <dl>
          <dt>
            <span> {{ item.userName }}</span>
            {{ $moment(item.createTime).fromNow() }}
          </dt>
          <dd>
            <span href="">{{ item.userName }}</span>分享了一个来自
            <span>{{ item.name }}</span> 的文档给你，请及时查看！
          </dd>
        </dl>
        <ul class="el-row--flex">
          <li v-for="(img, index2) in item.imgList" :key="index2">
            <img :src="img" alt="">
          </li>
        </ul>
        <!-- <a
          href="#"
          class="btn"
          @click.prevent="cancelSharing(item)"
        >取消分享</a> -->
        <a href="#" class="btn" @click.prevent="look(item)">查看分享</a>
      </div>
    </div>
    <cont
      v-if="dialogVisible"
      ref="cont"
      :selected-file="selectedFile"
      @closeCallback="closeCallback"
    />
  </div>
</template>

<script>
import { getShareToMy, updateShareToMyStatus } from '@/api/share'
import cont from '@/views/project/cont'
export default {
  name: 'Share',
  components: { cont },
  data() {
    return {
      dialogVisible: false,
      selectedFile: { suffix: '' },
      shareList: {
        total: 0,
        pageNo: 1,
        pageSize: 20,
        totalPages: 1,
        dataList: []
      },
      name: '',
      pageSize: 20,
      pageNo: 1
    }
  },
  computed: {},
  created() {
    this.getShareToMy()
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNo = val
      this.getShareToMy()
      console.log(`当前页: ${val}`)
    },
    getShareToMy() {
      getShareToMy({
        name: this.name,
        pageSize: this.pageSize,
        pageNo: this.pageNo
      })
        .then(result => {
          const { data } = result
          console.log(data)
          this.shareList = data
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    updateShareToMyStatus(id, userId) {
      updateShareToMyStatus(id, userId)
        .then(result => {
          const { data } = result
          console.log(data)
          this.$store.dispatch('index/getShareToMyStatus')
        })
        .catch(err => {
          console.log(err)
        })
    },
    look(item) {
      this.dialogVisible = true
      const userId = JSON.parse(sessionStorage.userInfo).userId
      const id = item.id
      this.updateShareToMyStatus(id, userId)
      this.$store.commit('index/set_authority', {
        isLook: 1,
        isUpdate: 0,
        isDelete: 0
      })
      this.$nextTick(() => {
        this.$store.commit('index/set_selectedFile', item)
        this.$refs.cont.screenfull()
      })
    },

    closeCallback() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.share {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  border: 16px solid #fff;
  padding: 0 59px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.title {
  line-height: 50px;
  font-size: 16px;

  font-weight: 500;
  color: rgba(44, 161, 213, 1);

  border-bottom: 1px solid #d8d8d8;
  position: relative;
  padding-left: 3px;

  &:after {
    content: "";
    width: 70px;
    height: 1px;
    display: block;
    background: #2ca1d5;
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .pagination {
    position: absolute;
    left: 200px;
    top: 10px;
  }
}

.case {
  height: 102px;
  border-bottom: 1px solid rgba(216, 216, 216, 0.5);
  align-items: center;

  .type {
    width: 54px;
    height: 54px;
    line-height: 54px;
    background: rgba(216, 216, 216, 0.5);
    border-radius: 12px 4px 4px 4px;

    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(74, 74, 74, 1);
    text-align: center;
    margin-right: 16px;
  }

  dl {
    width: 500px;
    margin: 0;
    position: relative;

    &::after {
      content: "";
      display: block;
      width: 1px;
      height: 40px;
      background: rgba(232, 232, 232, 1);
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -20px;
    }
    dt {
      font-size: 12px;
      font-weight: 500;
      color: rgba(185, 183, 183, 1);
      line-height: 17px;

      span {
        font-size: 14px;
        font-weight: 600;
        color: rgba(74, 74, 74, 1);
        line-height: 20px;
        display: inline-block;
        margin-right: 24px;
      }
    }

    dd {
      font-size: 14px;

      font-weight: 500;
      color: rgba(113, 113, 113, 1);
      line-height: 20px;
      margin: 16px 0 0 0;

      span {
        color: #2ca1d5;
      }
    }
  }

  ul {
    flex: 1;
    list-style: none;
    li {
      width: 108px;
      height: 64px;
      margin-left: 24px;
      overflow: hidden;
      border-radius: 8px;
      img {
        width: 100%;
      }
    }
  }

  .btn {
    width: 100px;
    height: 36px;
    display: block;
    background: rgba(33, 175, 255, 1);
    border-radius: 4px;

    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 36px;
    margin-left: 20px;
  }
}
</style>
<style lang="scss">
.pagination {
  .el-pager li {
    min-width: auto;
    color: #9cb2cd;
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: rgba(44, 161, 213, 0);
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(156, 178, 205, 1);
    margin: 0 5px;
    &.active {
      color: #ffffff;
      background: rgba(33, 175, 255, 1);
      border-radius: 30px;
    }
  }

  button {
    min-width: auto;

    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 1);
    border-radius: 9px;
    border: 1px solid rgba(222, 226, 236, 1);

    padding: 0 !important;
  }
}
.share {
  .el-dialog__body {
    height: calc(100% - 100px);
    display: flex;
  }
}
</style>

